<template>
	<view class="container">
		<!-- 顶部导航区域 -->
		<view class="header">
			<view class="location">
				<uni-icons type="location-filled" size="20" color="#333333"></uni-icons>
				<text class="location-text">北京市朝阳区</text>
				<uni-icons type="bottom" size="14" color="#666666"></uni-icons>
			</view>
			<view class="search-box">
				<uni-icons type="search" size="18" color="#666666"></uni-icons>
				<text class="placeholder">搜索商家、商品名称</text>
			</view>
		</view>

		<!-- 功能按钮区域 -->
		<view class="function-area">
			<view class="function-item" v-for="(item, index) in functionList" :key="index">
				<image class="function-icon" :src="item.icon" mode="aspectFill"></image>
				<text class="function-text">{{ item.name }}</text>
			</view>
		</view>

		<!-- 店铺列表区域 -->
		<scroll-view class="shop-list" scroll-y @scrolltolower="loadMore">
			<!-- 修正 click 为 @click -->
			<view class="shop-item" v-for="(shop, index) in shopList" :key="index" @click="gotoDetail()">
				<image class="shop-image" :src="shop.image" mode="aspectFill"></image>
				<view class="shop-info">
					<text class="shop-name">{{ shop.name }}</text>
					<view class="shop-middle">
						<view class="rating">
							<text class="score">{{ shop.score }}分</text>
							<text class="monthly-sales">月售{{ shop.monthlySales }}单</text>
						</view>
						<text class="delivery-time">{{ shop.deliveryTime }}分钟</text>
					</view>
					<view class="shop-bottom">
						<text class="minimum-price">起送¥{{ shop.minimumPrice }}</text>
						<text class="delivery-fee">配送¥{{ shop.deliveryFee }}</text>
						<text class="distance">{{ shop.distance }}km</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				functionList: [{
						name: '美食外卖',
						icon: 'https://ai-public.mastergo.com/ai/img_res/8a264482af5d14f9d3847375e9692417.jpg'
					},
					{
						name: '超市便利',
						icon: 'https://ai-public.mastergo.com/ai/img_res/f59c9e91a65af54e7b4f8c8bea2e253c.jpg'
					},
					{
						name: '鲜花绿植',
						icon: 'https://ai-public.mastergo.com/ai/img_res/281a41df4411b1b8d04689b9ecfe9596.jpg'
					},
					{
						name: '蛋糕甜点',
						icon: 'https://ai-public.mastergo.com/ai/img_res/cd8545801c659cc20b27c76106361e5a.jpg'
					}
				],
				shopList: [{
						name: '老北京炸酱面',
						image: 'https://ai-public.mastergo.com/ai/img_res/97d4350fc9ba88e2722fb5806c642e62.jpg',
						score: 4.8,
						monthlySales: 2390,
						deliveryTime: 30,
						minimumPrice: 20,
						deliveryFee: 5,
						distance: 1.2
					},
					{
						name: '川味小馆',
						image: 'https://ai-public.mastergo.com/ai/img_res/a46e9682a1dc770b96fc12f9fd90cc80.jpg',
						score: 4.6,
						monthlySales: 1890,
						deliveryTime: 35,
						minimumPrice: 25,
						deliveryFee: 6,
						distance: 2.1
					},
					{
						name: '粤式茶点',
						image: 'https://ai-public.mastergo.com/ai/img_res/0f68626dfd6d0aaf66f925426d01338e.jpg',
						score: 4.9,
						monthlySales: 3200,
						deliveryTime: 25,
						minimumPrice: 30,
						deliveryFee: 8,
						distance: 0.8
					}
				]
			};
		},
		methods: {
			loadMore() {
				// 加载更多店铺数据的逻辑
				console.log('加载更多店铺数据');
			},
			gotoDetail() {
				uni.navigateTo({
					url: '/pages/index/index-detail',
					success() {
						console.log('跳转成功');
					},
					fail(err) {
						console.error('跳转失败:', err);
					}
				});
			}
			
		}
	};
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.header {
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.location {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.location-text {
		font-size: 14px;
		color: #333333;
		margin: 0 8rpx;
	}

	.search-box {
		flex: 1;
		height: 64rpx;
		background-color: #f5f5f5;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
	}

	.placeholder {
		font-size: 14px;
		color: #999999;
		margin-left: 12rpx;
	}

	.function-area {
		padding: 30rpx;
		background-color: #ffffff;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		flex-shrink: 0;
	}

	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.function-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 12rpx;
	}

	.function-text {
		font-size: 12px;
		color: #333333;
	}

	.shop-list {
		flex: 1;
		overflow: auto;
		padding: 20rpx;
	}

	.shop-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
		display: flex;
		margin-bottom: 20rpx;
	}

	.shop-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.shop-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop-name {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.shop-middle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 12rpx 0;
	}

	.rating {
		display: flex;
		align-items: center;
	}

	.score {
		font-size: 14px;
		color: #ff6b01;
		margin-right: 12rpx;
	}

	.monthly-sales {
		font-size: 12px;
		color: #666666;
	}

	.delivery-time {
		font-size: 12px;
		color: #666666;
	}

	.shop-bottom {
		display: flex;
		align-items: center;
	}

	.minimum-price,
	.delivery-fee,
	.distance {
		font-size: 12px;
		color: #999999;
		margin-right: 16rpx;
	}
</style>